<template>
  <!-- 欢迎语区域 -->
  <el-row class="welcome-section" justify="center">
    <el-col :span="12">
      <div class="welcome-card">
        <h1 class="title">欢迎使用惊喜一餐！</h1>
        <p class="subtitle">探索您周围的美味餐厅，开启惊喜之旅！</p>
      </div>
    </el-col>
  </el-row>

  <!-- 推荐餐厅部分 -->
  <el-row class="recommended-restaurants" :gutter="20" justify="center">
    <el-carousel trigger="click" autoplay :interval="4000" arrow="always" class="carousel-container" type="card">
      <el-carousel-item v-for="restaurant in recommendedRestaurants" :key="restaurant.id" style="width: 500px;">
        <el-card class="restaurant-card" :body-style="{ padding: '20px' }" shadow="hover">
          <el-row :gutter="20">
            <!-- 图片部分 -->
            <el-col :span="12">
              <img :src="restaurant.image" alt="restaurant" class="restaurant-img" />
            </el-col>

            <!-- 餐厅信息部分 -->
            <el-col :span="12">
              <div class="card-content">
                <h4 class="restaurant-name">{{ restaurant.name }}</h4>
                <p class="restaurant-description">{{ restaurant.description }}</p>
                <el-rate v-model="restaurant.rating" disabled class="restaurant-rating"></el-rate>
                <div class="restaurant-details">
                  <p><strong>地址:</strong> {{ restaurant.address }}</p>
                  <p><strong>电话:</strong> {{ restaurant.phone }}</p>
                  <p><strong>营业时间:</strong> {{ restaurant.hours }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-carousel-item>
    </el-carousel>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { ElRow, ElCol, ElCard, ElRate} from 'element-plus';
import { ElCarousel, ElCarouselItem } from 'element-plus';

// 数据
const recommendedRestaurants = ref([
  {
    id: 1,
    name: '餐厅 A',
    description: '一家融合经典与创新的美食天堂',
    image: require('@/assets/restaurantA.jpg'),
    rating: 4.5,
    address: '北京市朝阳区XX街道123号',
    phone: '010-12345678',
    hours: '每天 10:00 - 22:00'
  },
  {
    id: 2,
    name: '餐厅 B',
    description: '新派风味餐厅，令人垂涎欲滴的美味',
    image: require('@/assets/restaurantB.jpg'),
    rating: 4.7,
    address: '北京市海淀区XX街道456号',
    phone: '010-23456789',
    hours: '每天 11:00 - 23:00'
  },
  {
    id: 3,
    name: '餐厅 C',
    description: '传承经典，口味永恒',
    image: require('@/assets/restaurantC.jpg'),
    rating: 4.2,
    address: '北京市东城区XX路789号',
    phone: '010-34567890',
    hours: '每天 9:00 - 21:00'
  },
  {
    id: 4,
    name: '餐厅 D',
    description: '一家融合经典与创新的美食天堂',
    image: require('@/assets/restaurantD.jpg'),
    rating: 4.7,
    address: '滁州市琅琊区XX街道123号',
    phone: '010-12345678',
    hours: '每天 10:00 - 22:00'
  },
  {
    id: 5,
    name: '餐厅 E',
    description: '新派风味餐厅，令人垂涎欲滴的美味',
    image: require('@/assets/restaurantE.jpeg'),
    rating: 4.6,
    address: '芜湖市弋江区XX街道456号',
    phone: '010-23456789',
    hours: '每天 11:00 - 23:00'
  }
]);
</script>

<style scoped>
.home-page {
  padding: 20px;
  background-color: #FFF7E1; /* 浅黄色背景，具有食欲感 */
  border-radius: 10px;
}

.main-content {
  padding: 30px;
  background-color: #FFE6CC; /* 温暖的浅橙色 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-left: 20px;
}

.restaurant-card {
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background-color: #FFF3E3; /* 更暖和的浅黄色 */
  transition: transform 0.3s ease-in-out;
}

.restaurant-card:hover {
  transform: translateY(-5px);
}

.restaurant-img {
  width: 600px;
  height: 250px;
  border-radius: 8px;
  object-fit: cover;
}

.card-content {
  padding-top: 10px;
  text-align: center;
}

.restaurant-name {
  font-size: 20px;
  font-weight: bold;
  color: #D65F5F; /* 热情的红色 */
}

.restaurant-description {
  font-size: 14px;
  color: #8B5A2B; /* 深棕色 */
  margin-top: 8px;
}

.restaurant-rating {
  margin-top: 10px;
}

.restaurant-details {
  margin-top: 10px;
  font-size: 14px;
  color: #6B4F4F;
}

.restaurant-details p {
  margin: 5px 0;
}

.view-button {
  margin-top: 20px;
  width: 100%;
  background-color: #FF7043; /* 鲜艳的橙色按钮 */
  border-color: #FF7043;
  color: #fff;
  font-size: 16px;
  padding: 12px;
  border-radius: 30px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* 欢迎语部分的样式 */
.welcome-section {
  margin-bottom: 40px;
}

.welcome-card {
  text-align: center;
}

.welcome-card .title {
  font-size: 30px;
  font-weight: bold;
  color: #FF5733; /* 温暖的橙红色 */
  margin-bottom: 20px;
}

.welcome-card .subtitle {
  font-size: 20px;
  color: #D17C2B; /* 深橙色 */
  margin-top: 10px;
}

.recommended-restaurants {
  width: 100%;
  overflow: hidden;
}

.recommended-restaurants {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 可以根据需要调整最大宽度 */
  height: 350px;
  display: flex;
}

.restaurant-card {
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background-color: #FFF3E3;
  transition: transform 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1; /* 中央餐厅置于上方 */
}

.restaurant-card:hover {
  transform: translateY(-5px);
}

.carousel-container .el-carousel-item {
  display: flex;
  justify-content: center;
}

.restaurant-img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.card-content {
  padding: 10px 0;
  text-align: center;
}

.restaurant-name {
  font-size: 18px;
  font-weight: bold;
}

.restaurant-description {
  color: #666;
}

.restaurant-rating {
  margin-top: 10px;
}

.restaurant-details {
  margin-top: 10px;
  font-size: 14px;
}
</style>